<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>购物车</title>
    <script src="./static/js/vue-2.6.10.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <style>
        .cart {
            width: 800px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
        }
        .top{
            font-size: 40px;
            color: white;
            background-color: red;
        }
        .header a{
            font-size: 13;
            text-decoration: none;
            float: right;
        }
        .item {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        .item img {
            width: 100px;
            height: 100px;
            margin-right: 10px;
        }
        .item-details {
            flex: 1;
        }
        #checkmark {
            width: 30px;
            height: 30px;
        }
        .price {
            color: red;
            font-weight: bold;
        }
        .guarantee{
            white-space: pre;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .quantity {
            display: flex;
            align-items: center;
            margin-top: 5px;
            margin-left: 400px;
        }
        .quantity span{
            padding: 7px;
        }
        .quantity button {
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            background-color: #fff;
            transition: 0.1s;

        }
        .quantity button:hover {
            transform: scale(1.1);
            cursor: pointer
        }
        .quantity input {
            width: 50px;
            height: 30px;
            text-align: center;
            border: 1px solid #ccc;
        }
        .checkout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: bisque;
        }
        .checkout input{
            width: 30px;
            height: 30px;

        }
        .checkout-btn {
            width: 180px;
            font-size: 20px;
            background-color: red;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        .direct-sale {
            color: white;
            width: 40px;
            height: 10px;
            background-color: red;
        }
        .shanchu{
            padding: 11px;
            float: right;
            transition: 0.2s;

        }
        .shanchu:hover {
            transform: scale(1.1);
            cursor: pointer
        }
        .checkout label{
            margin-left: -80px;
        }
        .xuangou i{
            color: red;
            padding: 3;
            font-size: 15px;
        }
        .xuangou{
            margin-top: 5px;
            font-size: 13px;
            color: #4e555b;
        }
        .total{
            margin-top: 5px;
            font-size: 15px;
            color: #4e555b;
        }
        .total i{
            color: red;
            padding: 3;
            font-size: 18px;
        }
        .style_red{
            margin-bottom: -40px;
            color: red;
            /*font-weight: bold;*/
        }
    </style>
</head>

<body>
<div id="app" class="cart">
    <header class="header">
        <div class="top">我的购物车
            <a href="./product_list.jsp">返回</a>
<%--            <img src="./static/img/systemImages/购物车.jpg" alt="">--%>
        </div>
    </header>

    <div class="item" v-for="product in products" :key="product.id">
<%--        <input type="checkbox" v-model="selectAll" @change="toggleSelect(product)">--%>
        <img id="checkmark" :src="checkedImage(product)" @click="toggleSelect(product)">
        <img :src="images(product.picture)" alt="">
        <div class="item-details">
            <span class="direct-sale">直营</span>
            <span class="item-title">{{ product.name }}</span>
            <p class="style_red">7天无理由退货</p><br>
            <div v-on:click="remove(index)" class="shanchu">删除</div>
            <div class="quantity">
                <span class="price">¥{{ product.sell_price }}</span>
                <button @click="decreaseQuantity(product)">-</button>
                <span>X{{ product.number }}</span>
                <button @click="increaseQuantity(product)">+</button>
            </div>
            <p class="guarantee">{{ product.description }}</p>
        </div>
    </div>

    <div class="checkout">
        <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
        <label>全选</label>
        <span class="xuangou">已选购 <i>{{ checkoutCount }} </i>件商品</span>
        <span class="total">总价:<i>¥{{  total }}</i> </span>
        <button class="checkout-btn" @click="submitDrder()">提交订单</button>
    </div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            selectAll: false,
            products: [{
                id: 1,
                picture: '1195000845831.jpg',
                isChecked: false,
                number: 1,
                description: '商品介绍',
                sell_price: 100,
                name: '示例商品'
            },
            ],


        },
        created() {
            axios.get('getCar.do')
                .then(result => {
                    console.log('API 返回数据:', result.data);
                    if (Array.isArray(result.data)) {
                        this.products = result.data;
                    } else {
                        console.error('返回的数据不是数组，使用默认数据');
                    }
                })
                //     axios.get('getCar.do').then(function (result) {
                //         //使用获取到的数据替换商品列表
                //         app.products = result.data
                //         app.refreshData();
                //     });
                //
                // },
                .catch(error => {
                    console.error('请求错误:', error);
                    this.products = [];
                });
        },
        methods: {
            images(img_name) {
                return "static/img/productImages/" + img_name;
            },
            checkedImage(product) {
                // console.log("checkedImage:", product.isChecked);
                // console.log(product.isChecked ? 'checked.png' : 'no-checked.png')
                return 'static/img/productImages/' + (product.isChecked ? '选择-勾选.png' : '未勾选.png');

            },
            toggleSelect(product) {
                // product.isChecked = !product.isChecked;
                if(product.isChecked){
                    product.isChecked = false;
                }else{
                    product.isChecked = true;
                }
                // console.log("toggleSelect:", product.isChecked);
            },
            toggleSelectAll() {
                this.products.forEach(product => {
                    product.isChecked = this.selectAll;
                });
            },
            increaseQuantity(product) {
                product.number++;
            },
            decreaseQuantity(product) {
                if (product.number > 0) {
                    product.number--;
                }
            },
            selectProduct:function(_isSelect){
                //遍历productList,全部取反
                for (var i = 0; i < this.products.length; i++) {
                    this.products[i].select = !_isSelect
                }
            },
            remove:function(index){//移除的方法
                if(confirm('你确定要删除吗?')){
                    this.products.splice(index,1);
                }
            },
            submitOrder: function(){
                let param = {
                    "total_price":this.price,
                    "shopping_cars": this.products
                }
                axios.post(" submitOrder.do",param,{headers:{'Content-Type':'application/json'}})
                    .then(function (result){
                        // 判断结果是否有数据
                        if(result.data.length > 0 ){
                            // 如果添加成功则跳转到首页
                            window.location.href = "product_list.jsp.jsp";
                        }else{
                            // 反之则跳转到登录页面
                            window.location.href = "Login.jsp";
                        }
                    });
            }
        },

        computed: {
            //总价
            total() {
                return this.products.reduce((sum, product) => {
                    return sum + (product.isChecked ? product.sell_price * product.number : 0);
                }, 0);
            },

            checkoutCount() {
                return this.products.filter(product => product.isChecked && product.number > 0).length;
            }
        }

    });
</script>
</body>

</html>